const { ipcRenderer } = require('electron')
const path = require('path')
const fs = require('fs')

const Page = {
  init: () => {
    Page.ipcListen()
    $('#btnSelectImagesDir').on('click', Page.handleSelectImagesDir)
    $('#btnSelectExcelFile').on('click', Page.handleSelectExcelFile)
    // 提交
    $('#btnSubmit').on('click', Page.submit)
    const errDialog = $('#dialog-doing-err')
    errDialog.find('.done-confirm').on('click', () => {Page.toggleDialog(errDialog, 'hide')})
    const doneDialog = $('#dialog-done-info')
    doneDialog.find('.done-confirm').on('click', () => {Page.toggleDialog(doneDialog, 'hide')})
    // 打开文件
    $('#btnOpenFile').on('click', Page.handleOpenFile)
    // 打开文件夹
    $('#btnOpenDir').on('click', Page.handleOpenDir)
  },
  showPrgInfo: (data) => {
    const {errNo, msg, allDone} = data
    Page.progressShow(data)
    if (errNo !== 0) {
      const errDialog = $('#dialog-doing-err')
      errDialog.find('.tip-info').text(msg)
      Page.toggleDialog(errDialog, 'show')
      Page.subBtnStatusToggle('normal')
      return
    }
    if (allDone === 1) {
      const errDialog = $('#dialog-done-info')
      errDialog.find('i').text(data.filePath)
      Page.toggleDialog(errDialog, 'show')
      Page.subBtnStatusToggle('normal')
    }
  },
  toggleDialog: (dialog, toggle) => {
    const bodyClass = 'am-dimmer-active'
    const dialogClass = 'am-modal-active'
    const dimmerClass = 'am-active'
    const body = $('body')
    const dimmer = $('.am-dimmer')
    if (toggle === 'show') {
      body.addClass(bodyClass)
      dialog.addClass(dialogClass).show()
      dimmer.addClass(dimmerClass).show()
    } else {
      body.removeClass(bodyClass)
      dialog.removeClass(dialogClass).hide()
      dimmer.removeClass(dimmerClass).hide()
    }
  },
  progressShow: (data, hide) => {
    const prgImg = $('#prgImageRead')
    const prgFile = $('#prgFileRead')
    const prgData = $('#prgDataMatch')
    const infoPre = $('#progress-info')
    if (!!hide) {
      prgImg.hide()
      prgFile.hide()
      prgData.hide()
      infoPre.text('...')
      return
    }
    const {imgPrg, filePrg, dataMatchPrg, info} = data
    // 60
    if (imgPrg > 0) {
      prgImg.find('span').text(imgPrg)
      prgImg.attr(...Page.progressStyle(60, imgPrg)).show()
    }
    // 20
    if (filePrg > 0) {
      prgFile.find('span').text(filePrg)
      prgFile.attr(...Page.progressStyle(20, filePrg)).show()
    }
    // 20
    if (dataMatchPrg > 0) {
      prgData.find('span').text(dataMatchPrg)
      prgData.attr(...Page.progressStyle(20, dataMatchPrg)).show()
    }
    infoPre.text(info)
  },
  progressStyle: (percentage, prog) => {
    return ['style', `width: ${Math.floor(percentage * prog / 100)}%`]
  },
  submit: () => {
    // 初始化进度信息
    Page.progressShow({}, 'hide')
    const dir = $('#btnSelectImagesDir').attr('dir-path')
    const file = $('#doc-form-file').val()
    if (!!dir && !!file && file.substr(-4) === 'xlsx') {
      ipcRenderer.send('doTask', {dir, file})
      Page.subBtnStatusToggle('disabled')
    }
  },
  subBtnStatusToggle: (type) => {
    const btn = $('#btnSubmit')
    const waitIcon = $('#prgInfo .am-icon-spin')
    if (type == 'normal') {
      btn.removeAttr('disabled')
      btn.find('i').hide()
      waitIcon.hide()
      Page.dirChangeBind([])
      Page.fileChangeBind([])
    } else if (type == 'disabled') {
      btn.attr(type, type)
      btn.find('i').show()
      waitIcon.show()
    }
  },
  dirChangeBind: (list) => {
    const btn = $('#btnSelectImagesDir')
    let fileNames = ''
    if (list && list.length > 0) {
      btn.attr('dir-path', list[0])
      list.forEach((v) => {
        fileNames += '<span class="am-badge">...' + v.substring(v.lastIndexOf('\\')) + '</span> ' 
      })
    } else {
      btn.data('dir', '')
    }
    $('#dir-list').html(fileNames)
  },
  fileChangeBind: (list) => {
    const input = $('#doc-form-file')
    if (list && list.length > 0) {
      input.val(list[0])
    } else {
      input.val('')
    }
    Page.showSelectedFile()
  },
  showSelectedFile: () => {
    let fileNames = ''
    const val = $('#doc-form-file').val()
    if (val) {
      const str = val.substring(val.lastIndexOf('\\'))
      fileNames += '<span class="am-badge">...' + str + '</span> ' 
    }
    $('#file-list').html(fileNames)
  },
  handleSelectImagesDir: () => {
    ipcRenderer.send('btnSelectDirClick', 'showDialogDir')
  },
  handleSelectExcelFile: () => {
    ipcRenderer.send('btnSelectFileClick', 'showDialogFile')
  },
  handleOpenFile: () => {
    const path = $('#dialog-done-info .am-modal-bd>i').text()
    ipcRenderer.send('openFile', path)
  },
  handleOpenDir: () => {
    const path = $('#dialog-done-info .am-modal-bd>i').text()
    ipcRenderer.send('showItemInFolder', path)
  },
  ipcListen: () => {
    ipcRenderer.on('doingInfoRes', (ev,data) => {
      Page.showPrgInfo(data)
    })
    ipcRenderer.on('selectDirCancel', (ev,data) => {
      Page.dirChangeBind(data)
    })
    ipcRenderer.on('selectDirSubmit', (ev,data) => {
      Page.dirChangeBind(data)
    })
    ipcRenderer.on('selectDirErr', (ev,data) => {
      Page.dirChangeBind(data)
    })
    ipcRenderer.on('selectExcelFile', (ev,data) => {
      Page.fileChangeBind(data)
    })
  }
}

window.addEventListener('load', () => {
  $ = require('../../static/jquery.min.js')
  Page.init()
})
